<template>
  <div class="pet-products">
    <NavigationBar />
    <div class="page-header">
      <h1>精选宠物用品</h1>
      <p class="subtitle">为您的爱宠提供优质生活</p>
    </div>

    <div class="product-list">
      <div v-for="product in products" :key="product.id" class="product-card" @mouseover="hoveredProduct = product.id"
        @mouseleave="hoveredProduct = null" @click="viewProductDetail(product.id)">
        <div class="image-container">
          <img :src="product.image" :alt="product.name" class="product-image"
            :class="{ 'image-hover': hoveredProduct === product.id }" />
          <span v-if="product.isNew" class="new-badge">新品</span>
          <span v-if="product.discount" class="discount-badge">-{{ product.discount }}%</span>
        </div>
        <div class="product-info">
          <h2>{{ product.name }}</h2>
          <p class="product-description">{{ product.description }}</p>
          <div class="price-section">
            <span class="current-price">￥{{ calculateDiscountPrice(product) }}</span>
            <span v-if="product.discount" class="original-price">￥{{ product.price }}</span>
          </div>
          <div class="rating">
            <span v-for="star in 5" :key="star" class="star" :class="{ 'filled': star <= product.rating }">★</span>
            <span class="review-count">({{ product.reviews }})</span>
          </div>
          <!-- 添加数量选择对话框 -->
          <div v-if="showQuantityDialog" class="quantity-dialog-overlay">
            <div class="quantity-dialog">
              <h3>选择数量</h3>
              <div class="quantity-controls">
                <button @click="decrementQuantity">-</button>
                <input type="number" v-model.number="selectedQuantity" min="1" />
                <button @click="incrementQuantity">+</button>
              </div>
              <div class="dialog-buttons">
                <button @click="cancelAddToCart">取消</button>
                <button @click="confirmAddToCart">确认</button>
              </div>
            </div>
          </div>

          <!-- 修改加入购物车按钮 -->
          <button class="add-to-cart-btn" @click="showQuantityDialogForProduct(product)">
            <span>加入购物车</span>
            <i class="cart-icon">🛒</i>
          </button>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Footer from '@/components/Footer.vue';
import NavigationBar from '@/components/NavigationBar.vue';
import { useCartStore } from '@/stores/cart';

const router = useRouter();
const cartStore = useCartStore();

// 添加导航到产品详情页的方法
const viewProductDetail = (productId) => {
  router.push({ name: 'ProductDetail', params: { id: productId } });
};
// 添加以下状态和方法
const showQuantityDialog = ref(false);
const selectedProduct = ref(null);
const selectedQuantity = ref(1);

const showQuantityDialogForProduct = (product) => {
  selectedProduct.value = product;
  selectedQuantity.value = 1;
  showQuantityDialog.value = true;
};

const incrementQuantity = () => {
  selectedQuantity.value++;
};

const decrementQuantity = () => {
  if (selectedQuantity.value > 1) {
    selectedQuantity.value--;
  }
};

const cancelAddToCart = () => {
  showQuantityDialog.value = false;
};

const confirmAddToCart = () => {
  if (selectedProduct.value) {
    cartStore.addToCart({
      ...selectedProduct.value,
      quantity: selectedQuantity.value
    });
    showQuantityDialog.value = false;
  }
};

const hoveredProduct = ref(null);

const products = ref([
  {
    id: 1,
    name: '天然豆腐猫砂',
    description: '环保可冲厕所，强力结团除臭',
    price: 69.9,
    discount: 15,
    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01U6ERvv1yUbkNGQoi3_%21%212208134376582-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1746876398&t=96c32d4a1cff0b7543c26dd3a381a9f7',
    rating: 4,
    reviews: 128,
    isNew: false,
    category: '猫用品'
  },
  {
    id: 2,
    name: '全价无谷狗粮',
    description: '含三文鱼配方，促进毛发亮泽',
    price: 159,
    discount: 20,
    image: 'https://img14.360buyimg.com/pop/jfs/t1/6818/40/23534/109423/64f827c6F24fb9ee0/efb12d5dc659f080.jpg',
    rating: 5,
    reviews: 256,
    isNew: true,
    category: '狗粮'
  },
  {
    id: 3,
    name: '智能饮水机',
    description: '静音循环，保持水源新鲜',
    price: 199,
    discount: 10,
    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F3078263620%2FO1CN01jCQfma1cc0bAkRLsK_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1746877086&t=95b92aa98f7677082645b959f41371b4%212206688630784-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1746877229&t=cd9603aaf22dd2df2d78e7c19d111a6chttps://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01RUFBJx1Hf7NNKBmea_%21',
    rating: 4,
    reviews: 87,
    isNew: false,
    category: '宠物电器'
  },
  {
    id: 4,
    name: '豪华猫爬架',
    description: '多层设计，天然剑麻柱',
    price: 399,
    discount: 0,
    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2017%2F488%2F447%2F4215744884_206345325.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1746889154&t=dee5fe9a94179b76f1a5d82ab58535d7',
    rating: 5,
    reviews: 42,
    isNew: true,
    category: '猫家具'
  },
  {
    id: 5,
    name: '宠物美容梳',
    description: '防静电，去除浮毛',
    price: 45,
    discount: 5,
    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01eunaW61hMxdwrsZOv_%21%212209290504264-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1746877306&t=bd18b9ccea1ee60e3480d19f215f0e54',
    rating: 4,
    reviews: 193,
    isNew: false,
    category: '美容用品'
  },
  {
    id: 6,
    name: '自动喂食器',
    description: 'APP控制，定时定量投喂',
    price: 299,
    discount: 25,
    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01qK6yDc1ZL7BJMqqTb_%21%213823753177-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1746877446&t=e027922c49fd721effff4b5f655128ff',
    rating: 4,
    reviews: 76,
    isNew: false,
    category: '宠物电器'
  }
]);

const calculateDiscountPrice = (product) => {
  return product.discount
    ? (product.price * (1 - product.discount / 100)).toFixed(2)
    : product.price.toFixed(2);
};

const addToCart = (product) => {
  console.log('添加到购物车:', product.name);
  // 这里可以添加实际的购物车逻辑
};
</script>

<style scoped>
.pet-products {
  background-color: #f9f5f0;
  /* 米色背景 */
  min-height: 100vh;
  font-family: 'Arial', sans-serif;
  color: #5a4a42;
  /* 深棕色文字 */
}

.quantity-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.quantity-dialog {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  width: 300px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.quantity-dialog h3 {
  margin-top: 0;
  color: #5a4a42;
  text-align: center;
}

.quantity-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
}

.quantity-controls button {
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  background-color: #d4a373;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.quantity-controls input {
  width: 60px;
  height: 40px;
  text-align: center;
  margin: 0 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1.1rem;
}

.dialog-buttons {
  display: flex;
  justify-content: space-between;
}

.dialog-buttons button {
  flex: 1;
  padding: 0.7rem;
  margin: 0 0.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.dialog-buttons button:first-child {
  background-color: #f0f0f0;
  color: #5a4a42;
}

.dialog-buttons button:last-child {
  background-color: #d4a373;
  color: white;
}

.page-header {
  text-align: center;
  padding: 2rem 0;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-header h1 {
  font-weight: bold;
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  color: #8b7355;
  /* 米金色标题 */
}

.subtitle {
  font-size: 1.1rem;
  color: #a89f94;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 每行显示三个产品 */
  grid-auto-rows: auto;
  /* 自动调整行高 */
  gap: 2rem;
  /* 产品之间的间距 */
  padding: 0 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.product-card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  /* 推荐4:3或3:2的产品图比例 */
  overflow: hidden;
  background: #f8f4ee;
  /* 米色背景 */
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 完整显示 */
  transition: transform 0.5s ease;
  background: white;
  /* 白色背景 */
}

.image-hover {
  transform: scale(1.05);
}

.badge {
  position: absolute;
  top: 10px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
}

.new-badge {
  /* composes: badge; */
  left: 10px;
  background-color: #d4a373;
  /* 米色系新品标签 */
}

.discount-badge {
  /* composes: badge; */
  right: 10px;
  background-color: #cb997e;
  /* 米色系折扣标签 */
}

.product-info {
  padding: 1.5rem;
}

.product-info h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #6b5b4d;
}

.product-description {
  font-size: 0.9rem;
  color: #8e8c84;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.price-section {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}

.current-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #b5838d;
  /* 柔和的粉红色 */
  margin-right: 0.5rem;
}

.original-price {
  font-size: 0.9rem;
  color: #a5a5a5;
  text-decoration: line-through;
}

.rating {
  margin-bottom: 1.2rem;
}

.star {
  color: #e0e0e0;
  font-size: 1rem;
}

.star.filled {
  color: #ffc107;
  /* 金色星星 */
}

.review-count {
  font-size: 0.8rem;
  color: #a89f94;
  margin-left: 0.3rem;
}

.add-to-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7rem;
  background-color: #d4a373;
  /* 米色按钮 */
  color: white;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-to-cart-btn:hover {
  background-color: #cb997e;
  /* 深一点的米色 */
}

.cart-icon {
  margin-left: 0.5rem;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    /* 在小屏幕上显示两列 */
    padding: 0 1rem;
  }
}

/* 增加屏幕自适应样式 */
@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    /* 在小屏幕上显示两列 */
    padding: 0 1rem;
  }

  .quantity-dialog {
    width: 90%;
    padding: 1.5rem;
  }

  .quantity-controls button {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }

  .quantity-controls input {
    width: 50px;
    height: 30px;
    font-size: 0.9rem;
  }

  .dialog-buttons button {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr;
    /* 在更小屏幕上显示一列 */
    padding: 0 0.5rem;
  }

  .quantity-dialog {
    width: 95%;
    padding: 1rem;
  }

  .quantity-controls button {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }

  .quantity-controls input {
    width: 40px;
    height: 25px;
    font-size: 0.8rem;
  }

  .dialog-buttons button {
    padding: 0.4rem;
    font-size: 0.8rem;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .subtitle {
    font-size: 0.9rem;
  }

  .product-info h2 {
    font-size: 1rem;
  }

  .product-description {
    font-size: 0.8rem;
  }

  .current-price {
    font-size: 1.1rem;
  }

  .original-price {
    font-size: 0.8rem;
  }

  .star {
    font-size: 0.9rem;
  }

  .review-count {
    font-size: 0.7rem;
  }

  .add-to-cart-btn {
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  .cart-icon {
    margin-left: 0.3rem;
    font-size: 0.9rem;
  }
}
</style>